<template>
  <!--角色管理-->
  <div class="role-admin">
    <div class="role-admin-header-seach">
      <el-input
        v-model="roleName"
        style="width: 240px"
        placeholder="请输入角色名称查询"
      />
      <el-button style="margin-left: 20px" @click="reset">重置</el-button>
      <el-button color="rgb(222, 41, 16)" type="primary" @click="getRole"
        >查询</el-button
      >
    </div>
    <el-divider />
    <div class="role-admin-header">
      <div class="header-tip">
        总计 <span class="header-tip-nember">{{ roleList?.total }}</span> 个角色
      </div>
      <div class="header-tip-botton">
        <el-button
          color="rgb(222, 41, 16)"
          type="primary"
          @click="addRole"
          v-if="permissionState.update"
          ><el-icon><Plus /></el-icon>新增角色</el-button
        >
        <el-button color="rgb(222, 41, 16)" type="primary">导出excel</el-button>
      </div>
    </div>
    <div class="role-admin-table">
      <el-table
        :data="roleList?.list"
        stripe
        border
        style="width: 98%"
        :header-cell-style="tableHeaderColor"
        :cell-style="cellStyle"
        max-height="60vh"
      >
        <el-table-column prop="id" label="编号" width="100" />
        <el-table-column prop="roleName" label="角色名称" width="180" />
        <el-table-column prop="createAt" label="创建时间" />
        <el-table-column prop="stateName" label="状态">
          <template #default="scoped">
            <span
              style="color: rgb(0, 128, 255); margin-right: 10px"
              v-if="scoped.row.stateb"
              >启用</span
            >
            <span
              style="color: rgb(219, 0, 64); margin-right: 10px"
              v-if="!scoped.row.stateb"
              >禁用</span
            >
            <el-switch
              v-model="scoped.row.stateb"
              class="mb-2"
              size="small"
              style="
                --el-switch-on-color: rgb(0, 128, 255);
                --el-switch-off-color: #ff4949;
              "
              @change="
                changeRoleState(scoped.row.id, scoped.row.stateb ? 1 : 0)
              "
            />
          </template>
        </el-table-column>
        <el-table-column prop="creatorName" label="创建人" />
        <el-table-column
          fixed="right"
          label="操作"
          min-width="120"
          v-if="permissionState.delete || permissionState.update"
        >
          <template #default="scoped">
            <el-button
              link
              type="primary"
              size="small"
              @click="editRole(scoped.row.id)"
              v-if="permissionState.update"
            >
              <span style="color: rgb(222, 41, 16)">编辑</span></el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              v-if="permissionState.delete"
              @click="deleteRole(scoped.row.id)"
              ><span style="color: rgb(222, 41, 16)">删除</span></el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="role-admin-pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="roleList?.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { useRouter } from "vue-router"; // 引入useRouter函数
import { Permission } from "@/util/LocalStorgeGetPermission";
import http from "@/request/request";
import { Data } from "@/request/pageData";
const router = useRouter(); // 获取路由实例
interface Role {
  id: number;
  roleName: string;
  createAt: string;
  state: number;
  stateb: boolean;
  stateName: string;
  creatorName: string;
}

//---------------------------------变量----------------------------------//
// table样式
const tableHeaderColor = {
  background: "rgb(245, 248, 250) !important",
  color: "rgb(51, 51, 51)",
  "text-align": "center",
};
const cellStyle = {
  "text-align": "center",
};
const roleList = ref<Data<Role>>();
const currentPage = ref(1);
const pageSize = ref(10);

const roleName = ref<string>("");
const permissionState = ref({
  insert: false,
  update: false,
  delete: false,
});
//-------------------------------------方法------------------------------//
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  getRole();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  getRole();
};
// 重置
const reset = () => {
  roleName.value = "";
};
// 编辑角色
const editRole = (id: number) => {
  console.log(id);
  router.push("/roleEdit?id=" + id);
};
// 新增角色
const addRole = () => {
  router.push("/roleEdit");
};
// 删除角色
const deleteRole = async (id: number) => {
  try {
    await http.post("/api/system/deleteRole?roleId=" + id);
    getRole();
  } catch (err) {
    console.log(err);
  }
};
// 修改角色状态
const changeRoleState = async (id: number, state: number) => {
  console.log(state);
  try {
    await http.post("/api/system/updateRoleStatus", {
      id: id,
      state: state,
    });
    getRole();
  } catch (err) {
    console.log(err);
  }
};
// 获取角色列表
const getRole = async () => {
  try {
    const params = {
      roleName: roleName.value,
      page: currentPage.value,
      pageSize: pageSize.value,
    };
    const { data } = await http.get<Data<Role>>(
      "/api/system/getRoleList",
      params
    );
    roleList.value = data;
    roleList.value.list.forEach((element) => {
      element.stateb = element.state === 1;
    });
  } catch (err) {
    console.log(err);
  }
};

//-------------------------------------------------生命周期----------------------------//
onMounted(() => {
  const p = new Permission("/role").getPermission();
  if (!p) {
    router.push("/");
  } else {
    permissionState.value = p;
    getRole();
  }
});
</script>

<style lang="less" scoped>
.role-admin {
  background-color: rgb(255, 255, 255);
  width: 97%;
  height: 96%;
  padding: 20px;
}
.role-admin-header-seach {
  display: flex;
}
.role-admin-header {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
  .header-tip {
    width: 8%;
    .header-tip-nember {
      color: rgb(64, 158, 255);
    }
  }
  .header-tip-botton {
    width: 90%;
    display: flex;
    justify-content: end;
  }
}
.role-admin-pagination {
  position: absolute;
  right: 2%;
  top: 90%;
}
</style>